import * as ImagePicker from "expo-image-picker";
import { useRouter } from "expo-router";
import React, { useState } from "react";
import {
  Alert,
  Image,
  ScrollView,
  StyleSheet,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";

export default function AddEmployeeScreen() {
  const router = useRouter();
  const [avatar, setAvatar] = useState<string | null>(null);
  const [name, setName] = useState("");
  const [gender, setGender] = useState<"男" | "女">("男");
  const [age, setAge] = useState("");
  const [years, setYears] = useState("");
  const [selectedStore, setSelectedStore] = useState<{ id: string; name: string } | null>(null);


  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: 'images',
      allowsEditing: true, // 可以裁剪
      aspect: [1, 1],       // 正方形
      quality: 1,
    });

    if (!result.canceled && result.assets.length > 0) {
      setAvatar(result.assets[0].uri);
    }
  };

  const handleSave = () => {
    if (!name || !avatar || !age || !years) {
      Alert.alert("提示", "请填写完整的员工信息");
      return;
    }

    const newEmployee = {
      id: Date.now().toString(),
      name,
      gender,
      age: Number(age),
      years: Number(years),
      avatar,
    };

    console.log("新增员工:", newEmployee);
    Alert.alert("成功", "员工已添加");
  };

  return (
    <ScrollView contentContainerStyle={styles.container}>
      <TouchableOpacity onPress={pickImage} style={styles.avatarPicker}>
        {avatar ? (
          <Image source={{ uri: avatar }} style={styles.avatarPreview} />
        ) : (
          <Text style={styles.avatarPlaceholder}>点击上传头像</Text>
        )}
      </TouchableOpacity>

      <Text style={styles.label}>姓名</Text>
      <TextInput
        style={styles.input}
        placeholder="请输入姓名"
        value={name}
        onChangeText={setName}
      />

      <Text style={styles.label}>性别</Text>
      <View style={styles.genderContainer}>
        <TouchableOpacity
          style={[styles.genderBtn, gender === "男" && styles.genderSelected]}
          onPress={() => setGender("男")}
        >
          <Text style={styles.genderText}>男</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={[styles.genderBtn, gender === "女" && styles.genderSelected]}
          onPress={() => setGender("女")}
        >
          <Text style={styles.genderText}>女</Text>
        </TouchableOpacity>
      </View>

      <Text style={styles.label}>年龄</Text>
      <TextInput
        style={styles.input}
        placeholder="请输入年龄"
        keyboardType="numeric"
        value={age}
        onChangeText={setAge}
      />

      <Text style={styles.label}>工龄</Text>
      <TextInput
        style={styles.input}
        placeholder="请输入工龄"
        keyboardType="numeric"
        value={years}
        onChangeText={setYears}
      />
      {/* 门店选择 */}
      <Text style={styles.label}>所属门店</Text>
      <TouchableOpacity
        style={styles.storePicker}
        onPress={() => {

        }}
      >
        <Text style={{ fontSize: 14 }}>
          {selectedStore ? selectedStore.name : "请选择门店"}
        </Text>
      </TouchableOpacity>

      <TouchableOpacity style={styles.saveBtn} onPress={handleSave}>
        <Text style={styles.saveBtnText}>保存</Text>
      </TouchableOpacity>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: "#f5f6fa",
  },
  label: {
    fontSize: 14,
    fontWeight: "bold",
    marginTop: 12,
    marginBottom: 6,
  },
  input: {
    backgroundColor: "#fff",
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 14,
    borderWidth: 1,
    borderColor: "#ddd",
  },
  genderContainer: {
    flexDirection: "row",
    marginBottom: 10,
  },
  genderBtn: {
    flex: 1,
    paddingVertical: 10,
    marginRight: 10,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#007bff",
    alignItems: "center",
  },
  genderSelected: {
    backgroundColor: "#007bff",
  },
  genderText: {
    color: "#000",
    fontWeight: "bold",
  },
  avatarPicker: {
    width: 100,
    height: 100,
    borderRadius: 12,
    backgroundColor: "#e0e0e0",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10,
    alignSelf: "center",
    overflow: "hidden",
  },
  avatarPreview: {
    width: "100%",
    height: "100%",
    resizeMode: "cover",
  },
  avatarPlaceholder: {
    color: "#555",
  },
  saveBtn: {
    backgroundColor: "#007bff",
    paddingVertical: 14,
    borderRadius: 12,
    marginTop: 20,
    alignItems: "center",
  },
  saveBtnText: {
    color: "#fff",
    fontSize: 16,
    fontWeight: "bold",
  },
  storePicker: {
    backgroundColor: "#fff",
    paddingVertical: 10,
    paddingHorizontal:10,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: "#007bff",
    marginBottom: 10
  },
});